HSL color
HSL 是指色相(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色属性的一种表示方法,常用于描述和操作颜色。具体来说:
色相(Hue): 表示颜色在色谱中的位置,以角度表示,通常在 0 到 360 度之间,对应于色谱上的颜色。0 度和 360 度都表示红色,120 度表示绿色,240 度表示蓝色等。
饱和度(Saturation): 表示颜色的纯度或强度,从 0% 到 100% 的范围内,0% 表示灰色阴影,100% 表示最鲜艳的颜色。
亮度(Lightness): 表示颜色的明暗程度,同样在 0% 到 100% 的范围内,0% 表示黑色,100% 表示白色,50% 表示正常亮度。
HSL 色彩模型相对于其他表示方法(如 RGB 或 CMYK)有一些优点:
直观性: HSL 更直观,更符合人眼对颜色的感知。色相表示颜色种类,饱和度表示颜色的鲜艳程度,亮度表示颜色的明亮度,这种表示方法更符合人的感觉。
易于调整: 在 HSL 模型中,调整颜色的属性更加直观和方便。例如,增加亮度可以使颜色变得更明亮,减小饱和度可以使颜色变得更灰淡。
色调相对性: HSL 模型在进行颜色调整时,通常能够保持颜色的整体色调相对不变。这使得在设计中更容易保持一致的配色。
总的来说,HSL 色彩模型在设计和图形处理领域中被广泛使用,因为它更符合人的感知方式,并且更容易用于调整和操纵颜色。
shadcn-ui use hsl color to define style variable
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body,
:root {
height: 100%;
}
/* generated by shadcn-ui */
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
}